<template>
  <div class="detail-wrap">
    <detail-header></detail-header>
    <div v-on:click="handleBannerClick">
      <detail-banner></detail-banner>
    </div>
    <common-gallary
      :gallaryList="gallaryList"
      :isShowGallary="isShowGallary"
      v-on:closeGallary="handleCloseGallary"
    ></common-gallary>
    <div class="content-box">
      <detail-list :detailList="detailList"></detail-list>
    </div>
  </div>
</template>

<script>
import Banner from "./components/Banner";
import Gallary from "common/gallary/Gallary";
import Header from "./components/Header";
import List from "./components/List";
import axios from "axios";
import { mapState } from "vuex";

export default {
  name: "Detail",
  components: {
    "detail-banner": Banner,
    "common-gallary": Gallary,
    "detail-header": Header,
    "detail-list": List
  },
  data() {
    return {
      gallaryList: [],
      isShowGallary: false,
      detailList: [],
      lastCity: ""
    };
  },
  methods: {
    handleBannerClick: function() {
      this.isShowGallary = true;
    },

    handleCloseGallary: function() {
      this.isShowGallary = false;
    },

    getDeatilInfo: function() {
      axios
        .get("/gallary.json", {
          params: {
            id: this.$route.params.id
          }
        })
        .then(res => {
          if (res.data.ret === "true" && res.data.data) {
            var data = res.data.data;
            this.gallaryList = data.swiperList;
          }
        })
        .catch(err => {
          console.log(err);
        });

      axios
        .get("/index.json?city=" + this.curCity)
        .then(res => {
          if (res.data.ret === "true" && res.data.data) {
            var data = res.data.data;
            this.detailList = data.recommendList;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  computed: {
    ...mapState({
      curCity: "city"
    })
  },
  mounted: function() {
    this.lastCity = this.curCity;
    this.getDeatilInfo();
  },
  activated: function() {
    if (this.lastCity !== this.curCity) {
      this.lastCity = this.curCity;
      this.getDeatilInfo();
    }
  }
};
</script>

<style lang="stylus" scoped>
.content-box {
}
</style>